<template>
  <div v-loading="loading" class="app-container">
    <div style="color: red; text-align: center">
      <!-- *注意默认只查询当天的统计数据，如果要查询其它的，请选择范围查询 -->
    </div>
    <br />
    <!-- 查询条件开始 -->
    <el-card class="cardmargin">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="queryParams.dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 查询条件结果 -->
    <el-card class="cardmargin">
      合计收入:￥<span>{{ totalIncome - backIncome }}</span>
    </el-card>
    <el-card class="cardmargin">
      收支概况:
      <span class="spancls">总收入￥{{ totalIncome }}</span>
      <span class="spancls spanred">总退费￥{{ backIncome }}</span>
    </el-card>
    <el-card class="cardmargin">
      收入渠道:
      <span class="spancls">现金支付￥{{ cashIncome }}</span>
      <span class="spancls">支付宝支付￥{{ alipayIncome }}</span>
      <span class="spancls">微信支付￥{{ wecharIncome }}</span>
      <span class="spancls spanred">现金退费￥{{ cashRefund }}</span>
      <span class="spancls spanred">支付宝退费￥{{ alipayRefund }}</span>
      <span class="spancls spanred">微信退费￥{{ wecharRefund }}</span>
    </el-card>
    <!-- 收支概况统计表 -->
    <div class="chart">
      <div class="statistics" id="total"></div>
      <div class="statistics" id="income"></div>
    </div>
  </div>
</template>

<script>
import { queryAllRevenueData } from "@/apis/statistics/revenue";
import * as echarts from "echarts";

export default {
  data() {
    return {
      // 遮罩
      loading: false,
      // 查询参数
      queryParams: {
        dateRange: undefined,
      },
      payTotalPriceList: [],
      backAllBackSaleList: [],
      totalIncome: 0,
      //总退费
      backIncome: 0,
      //现金支付
      cashIncome: 0,
      //支付宝支付
      alipayIncome: 0,
      //现金退费
      cashRefund: 0,
      //支付宝退费
      alipayRefund: 0,
      //微信支付
      wecharIncome:0,
      //微信退费
      wecharRefund:0,

    };
  },

  mounted() {
    this.loadData();
  },

  methods: {
    loadData() {
      // this.loading = true;
      var self = this;
      queryAllRevenueData(this.queryParams)
        .then((res) => {
          // //总收入
          
          let total = res.data[0];
          let info = res.data[1];
          // console.log(total)
          this.totalIncome = total[0].totalIncome;
          this.backIncome = total[1].totalBack;

          this.cashIncome = info[0].pay;
          this.alipayIncome = info[1].payAl;
         this.wecharIncome= info[2].wechar;
         this.cashRefund = info[3].back;
          this.alipayRefund = info[4].backAl;
          this.wecharRefund= info[5].backwechar;
          
       
          var myChart = echarts.init(document.getElementById("total"));
          var myChart1 = echarts.init(document.getElementById("income"));

          let option = {
            title: {
              text: "收支概况",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "收支概况",
                type: "pie",
                radius: "50%",
                data: [
                  { value: total[0].totalIncome, name: "总收入" },
                  { value: total[1].totalBack, name: "总退费" },
                ],

                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          myChart.setOption(option);

          //=========收入渠道表格=====
          let option1 = {
            title: {
              text: "收入渠道",
              left: "center",
            },
            tooltip: {
              trigger: "item",
              
            },
            //小标签
            legend: {
              orient: "vertical",
             left: "left"
            },
            series: [
              {
                name: "收入渠道",
                type: "pie",
                radius: "50%",
                data: [
                  { value: info[0].pay, name: "现金支付" },
                  { value: info[1].payAl, name: "支付宝支付" },
                  { value: info[2].wechar, name: "微信支付" },
                  { value: info[3].back, name: "现金退费" },
                  { value: info[4].backAl, name:"支付宝退费"},
                  { value: info[5].backwechar,name:"微信退费"}
                ],

                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          myChart1.setOption(option1);
        })
        .catch(() => {
          this.msgError("查询失败");
          this.loading = false;
        });
    },

    // 条件查询
    handleQuery() {
      this.loadData();
    },
    // 重置查询条件
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = [];
      this.loadData();
    },
  },
};
</script>
<style  scoped>
.chart {
  display: flex;
}
.statistics {
  width: 550px;
  height: 250px;
  margin: 30px 10px;
 
}
.cardmargin {
  margin-bottom: 3px;
}
.spancls {
  display: inline-block;
  margin-left: 80px;
}
.spanred {
  color: red;
}
</style>
